<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三国点将台</title>
    <style>
        button {  width: 100px;  height: 50px;  font-size: 30px;  }
        p {  text-align: center;  font-size: 50px;  margin-top: 100px;  font-weight:bold;  }
    </style>
    <script>
        window.onload = function () {
            var obtn1 = document.getElementById("btn1");
            var obtn2 = document.getElementById("btn2");
            var op = document.getElementById("p1");
            var timer = null;
            var names = ["赵云", "张飞", "关羽", "马超", "黄忠", "姜维","魏延","夏侯惇","吕布","张郃","张辽","陆逊","周瑜","吕蒙","甘宁","太史慈","周泰","黄盖","徐晃","许褚"];
            obtn1.onclick = function () {
                clearInterval(timer);
                var index = 0;
                timer = setInterval(function () {
                    index = parseInt(Math.random()*names.length);
                    op.innerHTML = names[index];
                }, 50)
            }
            obtn2.onclick = function () {
                clearInterval(timer);
            }
        }
    </script>
</head>
<body>
<button id="btn1">开始</button>
<button id="btn2">停止</button>
<p id="p1">点将台</p>
</body>
</html>